<script setup lang="ts">
import { ref } from 'vue'

const bookList = ref([
  { title: 'css揭秘',  img: '/zm-docs/imgs/css.webp', link: 'http://zhumao01.gitee.io/books/books/css.pdf' },
  { title: 'HTML5秘籍.第2版',  img: '/zm-docs/imgs/html.webp', link: 'http://zhumao01.gitee.io/books/books/html.pdf' },
  { title: 'CSS in Depth',  img: '/zm-docs/imgs/css2.webp', link: 'http://zhumao01.gitee.io/books/books/css2.pdf' },
  { title: '响应式Web设计 HTML5和CSS3实战 第2版',  img: '/zm-docs/imgs/web.webp', link: 'http://zhumao01.gitee.io/books/books/web.pdf' },
  { title: 'JavaScript高级程序设计(第4版)',  img: '/zm-docs/imgs/javascript.webp', link: 'http://zhumao01.gitee.io/books/books/javascript.pdf' },
  { title: '你不知道的JavaScript（上卷）[撩撩前端]',  img: '/zm-docs/imgs/javascript1.webp', link: 'http://zhumao01.gitee.io/books/books/javascript1.pdf' },
  { title: '你不知道的JavaScript（中卷）[撩撩前端]',  img: '/zm-docs/imgs/javascript2.webp', link: 'http://zhumao01.gitee.io/books/books/javascript2.pdf' },
  { title: '你不知道的JavaScript（下卷）[撩撩前端]',  img: '/zm-docs/imgs/javascript3.webp', link: 'http://zhumao01.gitee.io/books/books/javascript3.pdf' },
  { title: '学习JavaScript数据结构与算法第3版',  img: '/zm-docs/imgs/javascript4.webp', link: 'http://zhumao01.gitee.io/books/books/javascript4.pdf' },
  { title: '（JavaScript编程精解）Eloquent JavaScript 3rd Edition-2018-英文版',  img: '/zm-docs/imgs/javascript5.webp', link: 'http://zhumao01.gitee.io/books/books/javascript5.pdf' },
  { title: '(精通模块化JavaScript)Mastering Modular JavaScript-2018-英文版',  img: '/zm-docs/imgs/javascript6.webp', link: 'http://zhumao01.gitee.io/books/books/javascript6.pdf' },
  { title: 'Vue.js项目实战',  img: '/zm-docs/imgs/vue.webp', link: 'http://zhumao01.gitee.io/books/books/vue.pdf' },
  { title: '图解HTTP',  img: '/zm-docs/imgs/http.webp', link: 'http://zhumao01.gitee.io/books/books/http.pdf' },
  { title: '精通Git 第二版',  img: '/zm-docs/imgs/git.webp', link: 'http://zhumao01.gitee.io/books/books/git.pdf' },
  { title: '前端架构设计',  img: '/zm-docs/imgs/design.webp', link: 'http://zhumao01.gitee.io/books/books/design.pdf' },
  { title: '深入浅出Webpack',  img: '/zm-docs/imgs/webpack.webp', link: 'http://zhumao01.gitee.io/books/books/webpack.pdf' },
  { title: '正则表达式必知必会',  img: '/zm-docs/imgs/reg.webp', link: 'http://zhumao01.gitee.io/books/books/reg.pdf' },
  { title: 'Node与Express开发',  img: '/zm-docs/imgs/node.webp', link: 'http://zhumao01.gitee.io/books/books/node.pdf' },
  { title: '深入浅出Node.js',  img: '/zm-docs/imgs/node1.webp', link: 'http://zhumao01.gitee.io/books/books/node1.pdf' },
  { title: 'Learning.Node-Node学习指南',  img: '/zm-docs/imgs/node2.webp', link: 'http://zhumao01.gitee.io/books/books/node2.pdf' },
  { title: 'Node.js进阶之路',  img: '/zm-docs/imgs/node3.webp', link: 'http://zhumao01.gitee.io/books/books/node3.pdf' },
  { title: 'Node.js项目实践-构建可扩展的Web应用',  img: '/zm-docs/imgs/node4.webp', link: 'http://zhumao01.gitee.io/books/books/node4.pdf' },
  { title: '超实用的Node.js代码段',  img: '/zm-docs/imgs/node5.webp', link: 'http://zhumao01.gitee.io/books/books/node5.pdf' },
])

</script>

<template>
  <div class="book-content">
    <figure v-for="item in bookList" :key="item.link">
      <img :src="item.img" :title="item.title" />
      <figcaption>
        <a :href="item.link" target="_blank">{{ item.title }}</a>
      </figcaption>
    </figure>
  </div>

</template>

<style scoped lang="scss">
.book-content {
  //width: 100%;
  //height: 100%;
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  container-type: inline-size;
  figure {
    width: calc(25cqw - 1.5rem / 4);
    height: calc(25cqw - 1.5rem / 4);
    display: flex;
    align-items: center;
    flex-direction: column;
    img {
      height: calc(100% - 24px);
      object-fit: cover;
    }
    figcaption {
      font-size: 14px;
      height: 24px;
      max-width: 100%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}
</style>